<template>
	<view class="wrapper">
		<view class="login">
			<view class="login-content">
				<view class="login-content-title">已存在该手机号码{{setStore?.bindPhone?.phone || ''}}所注册账号，是否与该账号进行关联?</view>
				<view class="login-content-user main-flex">
					<view class="login-content-user-l">
						<image class="login-content-user-header" src="/static/images/icon/avatar.png"></image>
					</view>
					<view class="login-content-user-r main-flex-item">
						<view class="login-content-user-name">{{setStore?.bindPhone?.name || ''}}</view>
						<view class="login-content-user-phone">手机号码：{{setStore?.bindPhone?.phone || ''}}</view>
						<view class="login-content-user-time">注册时间：{{setStore?.bindPhone?.createTime || ''}}</view>
					</view>
				</view>
				<button class="ty-button ty-button-confirm login-btn" @click="submitForm">确认关联</button>
				<button class="ty-button ty-button-cancel login-btn" @click="cancel">暂不关联，返回绑定其他手机号码</button>
			</view>
			<view class="login-agreement main-flex" @click="changeAgreement">
				<uni-icons class="login-agreement-icon" :type="isAgreement?'checkbox-filled':'circle'" size="20" :color="isAgreement?'#e3230e':'#666666'"></uni-icons>
				<text>我已阅读并同意</text>
				<text class="login-agreement-item" @click.stop="goAgreement(1)">《服务协议》</text>
				<text>和</text>
				<text class="login-agreement-item" @click.stop="goAgreement(2)">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { relationCustomer } from "@/api/app_api/login"
import { updateHeard } from "@/api/app_api/user"
import { setToken } from '@/utils/auth'
import modal from '@/plugins/modal'
import { throttle, debounce, sleep } from '@/uni_modules/uview-plus'
	const userStore = useUserStore()
	const setStore = useSetStore()
	
	onLoad((option) => {
		
	})
	
	const isSubmit = ref(false)
	const submitForm = (e) => {
		if (!isAgreement.value) return uni.$u.toast('阅读并同意《服务协议》和《隐私政策》')
		if (!setStore?.bindPhone?.id) return uni.$u.toast('参数错误')
		isSubmit.value = true
		relationCustomer({
			customerId: setStore.bindPhone.id
		}).then(res => {
			if (res.token) {
				uni.$u.toast(res.msg)
				setToken(res.token)
				if (userStore?.user?.heardImg) {
					updateHeard({
						heardUrl: userStore.user.heardImg
					}).then(res => {
						userStore.getUserInfo()
						uni.$u.sleep(1000).then(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
							isSubmit.value = false
						})
					})
				} else {
					userStore.getUserInfo()
					uni.$u.sleep(1000).then(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
						isSubmit.value = false
					})
				}
			}
		}).catch(err => {
			uni.$u.toast(res.err)
			isSubmit.value = false
		})
	}
	const isAgreement = ref(false)
	const changeAgreement = () => {
		isAgreement.value = !isAgreement.value
	}
	// 查看协议
	const goAgreement = (type) => {
		uni.navigateTo({
			url: `/pages/web/web?type=${type}`
		})
	}
	
	// 取消绑定
	const cancel = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	
</script>

<style lang="scss">
	.login {
		padding: 40rpx;
		&-app {
			width: 100%;
			text-align: center;
		}
		&-bar {
			width: 100%;
		}
		&-content {
			width: 100%;
			&-title {
				font-size: 28rpx;
				text-align: $text-light;
				margin-top: 40rpx;
			}
			&-user {
				width: 500rpx;
				background-color: #ffffff;
				margin: 80rpx auto;
				padding: 20rpx;
				box-sizing: border-box;
				&-l{
					position: relative;
					width: 120rpx;
					height: 100%;
				}
				&-header {
					position: absolute;
					width: 160rpx;
					height: 160rpx;
					top: -140rpx;
					left: -80rpx;
					border-radius: 50%;
				}
				&-r {
					font-size: 28rpx;
				}
				&-name {
					font-weight: bold;
				}
				&-phone {
					margin-top: 10rpx;
				}
				&-time {
					margin-top: 10rpx;
				}
			}
			&-btns {
				margin-top: 40rpx;
			}
		}
		&-logo {
			&-img {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
			}
		}
		&-name {
			font-size: 48rpx;
			font-weight: bold;
			margin-top: 20rpx;
		}
		&-btn {
			width: 100%;
			height: 80rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
			justify-content: center;
			&+.login-btn {
				margin-top: 40rpx;
			}
		}
		&-agreement {
			width: 100%;
			font-size: 28rpx;
			margin-top: 40rpx;
			&-icon {
				margin-right: 10rpx;
			}
			&-item {
				color: #8c97cb;
			}
		}
	}
</style>
